<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
      <a-form
          layout="inline"
          :model="searchState"
      >
        <a-form-item>
          <a-input v-model:value="searchState.value" placeholder="Username">

          </a-input>
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" @click="search">搜索</a-button>
            <a-button type="primary" @click="add">增加</a-button>
          </a-space>
        </a-form-item>
      </a-form>


      <a-table :columns="columns" :data-source="data" rowKey="id" :pagination="pagination" :loading="loading"
               @change="handleTableChange">
        <template #cover="{text}">
          <a-image
              :width="50"
              :src="text"
              class="book-cover"
          />
        </template>
        <template #category="{record}">
          {{getCategoryName(record.category1Id)}} / {{getCategoryName(record.category2Id)}}
        </template>
        <template #action="{record }">
          <a-space>
            <router-link :to="'/admin/doc?ebookId='+record.id">
              <a-button type="primary">文档查看</a-button>
            </router-link>
            <a-button type="primary" @click="edit(record)">编辑</a-button>
            <a-popconfirm
                title="您确定删除该条信息"
                ok-text="确认"
                cancel-text="取消"
                @confirm="del(record.id)"
            >
              <a-button type="primary" danger>删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>

    </a-layout-content>
  </a-layout>
  <a-modal v-model:visible="visible" title="Title" @ok="handleOk">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="封面">
        <a-input v-model:value="formState.cover"/>
      </a-form-item>
      <a-form-item label="名称">
        <a-input v-model:value="formState.name"/>
      </a-form-item>
      <a-form-item label="分类">
        <a-cascader v-model:value="categoryArray" :options="treeData" :fieldNames="{label: 'name', value: 'id'}" placeholder="Please select" />
      </a-form-item>
      <a-form-item label="描述">
        <a-input v-model:value="formState.description"/>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认</a-button>
    </template>

  </a-modal>
</template>
<script lang="ts">
import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue';
import {defineComponent, onMounted, ref} from 'vue';
import {ebookList, ebookSave, ebookDel, categoryAll} from '@/api'
import {message} from 'ant-design-vue'
import {Tool} from "@/util/tool";

const columns = [
  {
    dataIndex: 'cover',
    key: 'cover',
    title: '封面',
    slots: {title: 'cover', customRender: 'cover'}
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '分类',
    slots: {customRender: 'category'}
  },
  {
    title: '文档数',
    key: 'docCount',
    dataIndex: 'docCount',
  },
  {
    title: '阅读数',
    key: 'viewCount',
    dataIndex: 'viewCount',
  }, {
    title: '点赞数',
    key: 'voteCount',
    dataIndex: 'voteCount',
  },

  {
    title: 'Action',
    key: 'action',
    slots: {customRender: 'action'}
  },
];
let  tree :any[] = []
export default defineComponent({
  setup: function () {
    let data = ref()
    let loading = ref(true)
    const mloading = ref<boolean>(false);
    const visible = ref<boolean>(false);
    const searchState = ref({value: ""})
    const treeData = ref()
    const categoryArray = ref()
    let pagination = ref({
      pageSize: 2,
      current: 1,
      total: 0
    })
    let formState = ref();
    onMounted(() => {
      handers()
      hander({page: pagination.value.current, size: pagination.value.pageSize})

    })
    /**
     * 查询列表方法
     * @param params
     */
    const hander = async (params: any) => {
      let res = await ebookList({page: params.page, size: params.size, name: params.name});
      data.value = res.data.content.list
      pagination.value.total = res.data.content.total
      pagination.value.current = params.page
      loading.value = false
    }
    const handers = async () => {
      let res = await categoryAll();
      let ret = res.data
      if (ret.success) {

        tree = res.data.content
        treeData.value = Tool.array2Tree(res.data.content, 0)
      } else {
        console.log("失败了")
      }

      loading.value = false
    }
    /**
     * 新增/编辑
     */
    const handleOk = async () => {
      mloading.value = true;
      formState.value.category1Id = categoryArray.value[0]
      formState.value.category2Id = categoryArray.value[1]

      let res = await ebookSave(formState.value)
      if (res.data.success) {
        await hander({page: pagination.value.current, size: pagination.value.pageSize})
        mloading.value = false;
        visible.value = false;
      } else {
        message.error(res.data.message)
      }
    }
    const handleCancel = () => {
      visible.value = false;
    }
    const edit = (item: any) => {

      formState.value = Tool.copy(item)
      visible.value = true;
      console.log(formState.value.category1Id)
      categoryArray.value = [formState.value.category1Id,formState.value.category2Id]

    }
    /**
     * 增加电子书
     */
    const add = () => {
      visible.value = true;
    }
    const del = async (id: number) => {
      await ebookDel(id)
      await hander({page: pagination.value.current, size: pagination.value.pageSize})
    }

    const handleTableChange = (pagination: any) => {
      hander({page: pagination.current, size: pagination.pageSize})
    }
    const search = async () => {
      console.log()
      await hander({page: pagination.value.current, size: pagination.value.pageSize, name: searchState.value.value})
    }
    /*
    * 获取分类名称
    * */
    const getCategoryName = (id:number)=>{
      let name = ''
      tree.map((item:any) => {
        if(item.id === id){
          name =  item.name
        }
      })
      return name
    }
    return {
      data,
      columns,
      pagination,
      loading,
      handleTableChange,
      visible,
      handleOk,
      handleCancel,
      edit,
      add,
      del,
      search,
      treeData,
      searchState,
      mloading,
      formState,
      categoryArray,
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      getCategoryName,

    };
  },
  components: {
    SmileOutlined,
    DownOutlined,
  },
});
</script>
<style scope>
.book-cover {
  border-radius: 8%;
}
</style>